|
废话不多说，直接上代码： 首先修改一下package.json文件内容，然后npm i即可：(与fullcalendar无关的，可自行处理删除)
package.json:
{
"name": "webtemplate",
"version": "1.0.0",
"description": "A Vue.js project",
"author": "foolishma",
"private": true,
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"build": "node build/build.js"
},
"dependencies": {
"@fullcalendar/core": "^4.4.0",
"@fullcalendar/daygrid": "^4.4.0",
"@fullcalendar/timegrid": "^4.4.0",
"@fullcalendar/vue": "^4.4.0",
"element-ui": "^2.13.0",
"jquery": "^3.4.1",
"vue": "^2.5.2",
"vue-router": "^3.0.1"
},
"devDependencies": {
"@fullcalendar/interaction": "^4.4.0",
"autoprefixer": "^7.1.2",
"axios": "^0.19.2",
"babel-core": "^6.22.1",
"babel-helper-vue-jsx-merge-props": "^2.0.3",
"babel-loader": "^7.1.1",
"babel-plugin-syntax-jsx": "^6.18.0",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-plugin-transform-vue-jsx": "^3.5.0",
"babel-preset-env": "^1.3.2",
"babel-preset-stage-2": "^6.22.0",
"chalk": "^2.0.1",
"copy-webpack-plugin": "^4.0.1",
"css-loader": "^0.28.0",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^1.1.4",
"friendly-errors-webpack-plugin": "^1.6.1",
"html-webpack-plugin": "^2.30.1",
"node-notifier": "^5.1.2",
"node-sass": "^4.13.1",
"optimize-css-assets-webpack-plugin": "^3.2.0",
"ora": "^1.2.0",
"portfinder": "^1.0.13",
"postcss-import": "^11.0.0",
"postcss-loader": "^2.0.8",
"postcss-url": "^7.2.1",
"rimraf": "^2.6.0",
"sass-loader": "^7.3.1",
"semver": "^5.3.0",
"shelljs": "^0.7.6",
"style-loader": "^1.1.3",
"uglifyjs-webpack-plugin": "^1.1.1",
"url-loader": "^0.5.8",
"vue-loader": "^13.3.0",
"vue-style-loader": "^3.0.1",
"vue-template-compiler": "^2.5.2",
"webpack": "^3.6.0",
"webpack-bundle-analyzer": "^2.9.0",
"webpack-dev-server": "^2.9.1",
"webpack-merge": "^4.1.0"
},
"engines": {
"node": ">= 6.0.0",
"npm": ">= 3.0.0"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie year: 'numeric', month: 'long', day: 'numeric' }" :slotLabelFormat="{
hour: '2-digit',
minute: '2-digit',
omitZeroMinute: false,
meridiem: 'short',
hour12:false
}" @prev="prev" :showNonCurrentDates='true' @eventClick="handleDateClick" @dateClick="dayClick" @eventMouseEnter="eventMouseEnter" @eventMouseLeave="eventMouseLeave" :slotLabelInterval="{
hours:1
}" :navLinks='false' :allDaySlot='false' :weekends="true" :firstDay='1' minTime='07:00:00' maxTime='22:00:00' slotDuration='00:60:00' :events="getCalendarEvents" :plugins="calendarPlugins" />
import FullCalendar from "@fullcalendar/vue";
// 引入插件
import timeGridPlugin from "@fullcalendar/timegrid";
import interactionPlugin from "@fullcalendar/interaction";
export default {
name: "App",
components: {
FullCalendar,
},
data() {
return {
// 放入数组中，在组件上引入
calendarPlugins: [timeGridPlugin, interactionPlugin],
calendarEvents: [
{
auditAdmin: [],
cancelResult: "",
color: "#2997ff",
durationTime: "105",
end: "2020-05-18 18:06",
info: "",
orderId: "202004071622389015",
orderRoomId: "9f7a4dafd00f4661af1012e4fc657562",
per: "管理员",
start: "2020-05-18 16:21",
status: "已结束",
tel: "15589582912",
title: "青岛市实验高级中学",
type: "会议场馆",
useful: "测试预约",
},
],
};
},
mounted() {},
methods: {
// 将标准时间转换成年.月.日
formatDate(date) {
var y = date.getFullYear();
var m = date.getMonth() + 1;
m = m
document.querySelector(".fc-icon.fc-icon-chevron-right").click();
},
// 获取日程的事件
getCalendarEvents(info, successCallback, failureCallback) {
// console.log(info.start.valueOf(),'输出info')
let events = [];
// this.$http.get(api.showEventsList, {
// params: {
// data1: ''
// }
// }).then(res => {
// console.log(res, '获取日历事件')
// if (res.data.code == 200) {
// successCallback(res.data.events)
// }
// }).catch(err => {
// // callback([])
// })
},
// 日程点击事件
handleDateClick(info) {
// console.log(info,'输出日程点击事件')
//这里可以做弹窗查看详情、新增、修改等相关的操作，info内有日程信息及event等信息
},
// 某单元格的点击事件
dayClick(arg) {
//我这里做了时间判断作为例子
// 获取点击单元格的毫秒数
var dateTime = arg.date.getTime();
// 获取当前时间毫秒数
var nowDate = new Date().getTime();
// 获取毫秒数差值
var timeDif = nowDate - dateTime;
// 如果点击的时间小于当前时间，及当前时间之前
if (timeDif >= -3600000 && timeDif
message: "最少提前1小时预约",
type: "warning",
});
return;
}
if (timeDif > 3600000) {
// 如果大于一小时
this.$message({
message: "时间已过，不可预约",
type: "warning",
});
return;
}
if (timeDif
message: "最多提前7天预约",
type: "warning",
});
return;
}
if (timeDif
console.log(info);
//可进行气泡形式的详情展示
},
// 当鼠标移出某个事件上的时候触发：
eventMouseLeave: function (info) {
console.log("移出");
},
formatDate1(date) {
// 简单的时间格式化处理
var H = date.getHours();
var m = date.getMinutes();
//小于10的在前面补0
if (H
m = "0" + m;
}
return H + ":" + m;
},
},
};
//样式修改看个人
.venue-approval {
width: 976px;
// height: 600px;
margin: 20px auto;
background: #fff;
}
#app {
font-family: "Avenir", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
// .sec_main_wrap {
.fc-completed {
background: #2997ff;
}
.fc-time-grid .fc-slats td {
height: 1.5em;
border-bottom: 0;
}
.fc-time-grid-event {
margin: 0 6px 0 -2px;
}
.fc-time-grid-event {
border-radius: 0;
display: block;
}
.fc-time-grid .fc-highlight-container {
z-index: 3;
position: relative;
}
.fc-time-grid .fc-highlight {
position: absolute;
left: 0;
right: 0;
}
.fc-highlight {
background: #bce8f1;
opacity: 0.3;
}
.fc-event {
border: none;
}
.fc-event,
.fc-event:hover {
color: #fff;
text-decoration: none;
}
.fc-icon,
.fc-row.fc-rigid,
.fc-time-grid-event {
overflow: hidden;
}
.fc-time-grid-event .fc-title {
font-size: 12px;
padding: 0 3px;
}
.fc-time-grid-event .fc-content {
overflow: hidden;
}
.fc-event .fc-content {
position: relative;
z-index: 2;
}
.fc-time-grid-event .fc-time {
font-size: 12px;
padding: 5px 7px;
}
.fc-time-grid-event .fc-time {
white-space: nowrap;
}
.fc-event .fc-bg {
z-index: 1;
background: #fff;
opacity: 0.25;
}
.fc-event {
font-size: 0.85em;
line-height: 1.3;
}
.fc-time-grid .fc-bgevent,
.fc-time-grid .fc-event {
position: absolute;
}
.fc-ltr .fc-time-grid .fc-event-container {
margin: 0 2.5% 0 2px;
}
.fc-time-grid .fc-event-container {
position: relative;
z-index: 4;
}
.fc-time-grid .fc-bgevent-container {
position: relative;
z-index: 2;
}
.fc-time-grid .fc-business-container {
position: relative;
z-index: 1;
}
.fc-time-grid .fc-helper-container {
position: relative;
z-index: 6;
}
.fc-cancel {
background: #d1d0d0 !important;
}
.fc-event-container a {
cursor: pointer;
}
.fc-time-grid .fc-content-skeleton {
position: absolute;
z-index: 3;
top: 0;
left: 0;
right: 0;
width: 974px;
}
tr {
display: table-row;
}
.fc-unthemed .fc-divider,
.fc-unthemed .fc-list-heading td,
.fc-unthemed .fc-popover .fc-header {
background: #eee;
}
.fc-slats .fc-widget-content {
width: 882px;
}
hr.fc-divider {
height: 0;
margin: 0;
padding: 0 0 2px;
border-width: 1px 0;
}
.fc-axis span {
display: block;
width: 71px;
height: 44px;
border: none;
text-align: right;
line-height: 44px;
background: #fdfdfd;
margin: 0 !important;
}
.fc-time-grid .fc-content-col {
position: relative;
}
.fc-time-grid .fc-slats,
.fc-time-grid > hr {
position: relative;
z-index: 2;
}
.fc-time-grid table {
border: 0 hidden transparent;
}
.fc table {
width: 100%;
box-sizing: border-box;
table-layout: fixed;
border-collapse: collapse;
border-spacing: 0;
}
.fc-bg table,
.fc-row .fc-bgevent-skeleton table,
.fc-row .fc-highlight-skeleton table {
height: 100%;
}
.fc button,
.fc table,
body .fc {
font-size: 1em;
}
.fc-ltr .fc-axis {
text-align: center;
}
.fc .fc-axis {
vertical-align: middle;
white-space: nowrap;
}
.fc-divider {
border-style: solid;
}
.fc-unthemed .fc-content,
.fc-unthemed .fc-divider,
.fc-unthemed .fc-list-heading td,
.fc-unthemed .fc-list-view,
.fc-unthemed .fc-popover,
.fc-unthemed .fc-row,
.fc-unthemed tbody,
.fc-unthemed td,
.fc-unthemed th,
.fc-unthemed thead {
border-color: #ddd;
}
.fc td,
.fc th {
border-style: solid;
border-width: 1px;
padding: 0;
vertical-align: top;
}
// 表格当前日期列的背景色
.fc-unthemed td.fc-today {
background: #fcf8e3;
}
.fc td.fc-today {
border-style: double;
}
.fc-axis {
width: 91px !important;
height: 38px !important;
padding: 0 !important;
}
.fc-time-grid > .fc-bg {
z-index: 1;
}
.fc-bg,
.fc-bgevent-skeleton,
.fc-helper-skeleton,
.fc-highlight-skeleton {
position: absolute;
top: 0;
left: 0;
right: 0;
}
.fc-bg,
.fc-row .fc-bgevent-skeleton,
.fc-row .fc-highlight-skeleton {
bottom: 0;
}
.item-world-more-tip {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 50px;
display: block;
}
.cgmc {
width: 314px;
}
.krnrs-wrap .krnrs {
width: 314px;
margin-left: 89px;
}
.krnrs-wrap .krnrs .num-from {
width: 120px !important;
margin-left: -3px;
}
.krnrs-wrap .krnrs .num-des {
width: 72px;
text-align: center;
}
.krnrs-wrap .krnrs .num-to {
width: 120px;
}
.filter-dialog-wrap {
width: 404px;
margin: 0 auto;
margin-top: 20px;
}
.btm-tips-info .success .bg {
width: 40px;
height: 20px;
background: #1da44a;
}
.btm-tips-info .completed .bg {
width: 40px;
height: 20px;
background: #2997ff;
}
.btm-tips-info .text {
font-size: 14px;
color: #333;
padding: 0 0 0 10px;
height: 20px;
line-height: 20px;
}
.btm-tips-info .approval .bg {
width: 40px;
height: 20px;
background: #fc6;
}
.btm-tips-info .approval .text,
.btm-tips-info .cancel .text,
.btm-tips-info .success .text {
margin-right: 65px;
}
.btm-tips-info .cancel .bg {
width: 40px;
height: 20px;
background: silver;
}
.btm-tips-info {
padding: 20px 0 0 14px;
}
.fc-view,
.fc-view > table {
position: relative;
z-index: 1;
}
.fc-unthemed .fc-content,
.fc-unthemed .fc-divider,
.fc-unthemed .fc-list-heading td,
.fc-unthemed .fc-list-view,
.fc-unthemed .fc-popover,
.fc-unthemed .fc-row,
.fc-unthemed tbody,
.fc-unthemed td,
.fc-unthemed th,
.fc-unthemed thead {
border-color: #ddd;
}
.fc-view-container *,
.fc-view-container :after,
.fc-view-container :before {
box-sizing: content-box;
}
.fc-divider.fc-widget-header {
width: 974px;
}
td {
display: table-cell;
}
.fc button,
.fc table,
body .fc {
font-size: 1em;
}
.fc .fc-row {
border-style: solid;
border-width: 0;
}
.fc-row table {
border-left: 0 hidden transparent;
border-right: 0 hidden transparent;
border-bottom: 0 hidden transparent;
}
.fc-row:first-child table {
border-top: 0 hidden transparent;
}
.fc-toolbar.fc-header-toolbar {
margin-bottom: 1em;
}
.fc-basic-view td.fc-week-number,
.fc-icon,
.fc-toolbar,
.fc th {
text-align: center;
}
.fc-header-toolbar {
display: none;
}
.fc-widget-header .fc-day-header span {
font-size: 14px;
color: #909399;
display: block;
width: 129px;
height: 40px;
line-height: 40px;
text-align: center;
}
.fc-toolbar .fc-left {
float: left;
}
.fc-toolbar .fc-right {
float: right;
}
.fc-icon,
.fc-toolbar .fc-center {
display: inline-block;
}
.fc-clear {
clear: both;
}
.fc {
direction: ltr;
text-align: left;
}
.clear:after {
content: "";
display: block;
clear: both;
}
.venue-list-scrollbar-wrap {
max-height: 820px;
padding-bottom: 330px;
}
.header-wrap {
width: 1240px;
margin: 0 auto;
padding: 20px 0 12px;
}
.clear {
zoom: 1;
}
.header-wrap .title-wrap {
width: 371px;
height: 33px;
margin: 0 0 0 436px;
}
.fl {
float: left;
}
.fr {
float: right;
}
.header-wrap .action {
font-size: 14px;
color: #666;
padding: 11px 0 0;
}
.header-wrap .title-wrap .prev {
width: 51px;
height: 33px;
border: 1px solid #dcdfe6;
}
.header-wrap .title-wrap .prev span i {
margin: 0 auto;
}
.header-wrap .title-wrap .time {
width: 267px;
height: 33px;
line-height: 33px;
font-size: 18px;
color: #666;
}
.header-wrap .title-wrap .time .start {
width: 122px;
height: 33px;
line-height: 33px;
text-align: right;
}
.header-wrap .title-wrap .time .line {
font-size: 14px;
width: 17px;
height: 33px;
line-height: 33px;
text-align: center;
margin: -1px 0 0;
}
.header-wrap .title-wrap .time .end {
width: 122px;
height: 33px;
line-height: 33px;
}
.header-wrap .title-wrap .next {
width: 51px;
height: 33px;
border: 1px solid #dcdfe6;
}
.fc-time-grid-container {
height: 674px !important;
}
.fc-time-grid,
.fc-time-grid-container {
z-index: 1;
}
.fc-scroller > .fc-day-grid,
.fc-scroller > .fc-time-grid {
position: relative;
width: 100%;
}
.fc-time-grid {
min-height: 100%;
}
.fc-unselectable {
user-select: none;
-webkit-tap-highlight-color: transparent;
}
// 提醒人弹窗样式
#common-district-select-teach-main {
width: 950px;
position: fixed;
left: 50%;
top: 50%;
margin-left: -475px;
background-color: #f1f1f1;
z-index: 99999;
margin-top: -10%;
}
#common-select-headers {
background-color: #409eff;
color: #fff;
font-size: 16px;
padding: 0 26px;
}
#common-select-bodys {
padding: 27px;
padding-top: 15px;
padding-bottom: 0;
}
#select-bodys-checked-main ul.select-bar-list {
display: inline-block;
padding: 0;
margin: 0;
float: left;
}
#select-bodys-checked-main ul.select-bar-list li.active {
background-color: #fff;
color: #409eff;
}
#select-bodys-checked-main ul.select-bar-list li {
list-style: none;
display: block;
width: 95px;
height: 38px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
text-align: center;
line-height: 38px;
font-size: 14px;
margin-bottom: 5px;
cursor: pointer;
}
#select-bodys-checked-main .select-trees-shows-main {
width: 760px;
padding: 20px;
float: left;
display: inline-block;
background-color: #fff;
}
.common-select-tree-bodys {
width: 370px;
height: 100%;
display: inline-block;
float: left;
position: relative;
}
.common-search-main {
position: relative;
width: 209px;
height: 28px;
}
.select-trees-shows-main .select-list-common-main {
margin-top: 10px;
overflow-y: auto;
}
#common-district-select-teach-main input,
button {
outline: none;
}
.common-search-main .common-search-input {
position: absolute;
left: 0;
width: 170px;
height: 26px;
border: 1px solid #c6c6c6;
padding: 0 5px;
}
.common-search-main .common-search-button {
display: inline-block;
position: absolute;
right: 0;
width: 26px;
height: 26px;
line-height: 26px;
text-align: center;
border: 1px solid #c6c6c6;
cursor: pointer;
}
.select-center-line {
height: 100%;
border-left: 1px solid #d5d5d5;
width: 0;
display: inline-block;
margin-right: 15px;
float: left;
}
#select-result-show-main .select-result-show-title {
height: 32px;
line-height: 32px;
font-size: 14px;
color: #666;
}
#select-result-show-main .select-result-show-body {
background-color: #fff;
overflow: hidden;
overflow-y: auto;
}
#save-select-book {
float: right;
color: #66b3ff;
cursor: pointer;
}
#select-submit-btn-mian {
margin-top: 2px;
text-align: center;
}
#save-contact-moudel {
width: 100%;
position: absolute;
top: 0;
left: 0;
}
#save-contact-moudel .save-body-shade {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-color: #000;
opacity: 0.3;
}
#save-contact-main {
position: absolute;
top: 50%;
left: 50%;
width: 388px;
height: 210px;
margin-left: -194px;
margin-top: -105px;
background-color: #fff;
border-radius: 5px;
}
#common-district-select-teach-shade {
width: 100%;
height: 100%;
position: fixed;
left: 0;
top: 0;
background-color: #000;
opacity: 0.3;
z-index: 99998;
}
#common-select-headers .common-select-headers-close {
float: right;
cursor: pointer;
font-size: 18px;
}
#common-district-select-teach-main * {
box-sizing: content-box !important;
}
#select-result-show-main .select-result-show-body .item-selected-moudel {
display: inline-block;
height: 18px;
line-height: 18px;
padding: 2px 3px;
font-size: 14px;
background-color: #409eff;
color: #fff;
margin: 4px 6px;
border-radius: 3px;
}
#select-result-show-main .item-selected-moudel span {
display: inline-block;
max-width: 200px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
#select-result-show-main .item-selected-moudel i {
float: right;
width: 20px;
height: 18px;
line-height: 18px;
font-style: initial;
text-align: center;
cursor: pointer;
}
// }
|